<template>
    <el-main v-loading="loading">
        <el-card shadow="always">
            <template #header>
                <span style="width:100%;display: flex;justify-content: space-around;align-items: center">
                    <h1 style="font-size: 2.1em">{{inform.title}}</h1>
                    <el-button link @click="download">
                        <el-icon :size="40"><Download/></el-icon>
                        <span style="font-size: 2.1em">下载</span>
                    </el-button>
                </span>
            </template>
            <vue-office-docx
                v-if="!isPdf"
                :src="inform.resourceId"
                @rendered="handleRenderedDocx"
                @error="errorHandler"
            />
            <vue-office-pdf
                v-if="isPdf"
                :src="inform.resourceId"
                @rendered="handleRenderedPdf"
                @error="errorHandler"
            />
        </el-card>
    </el-main>
</template>

<script setup>
import {onMounted, ref} from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import {getInformById} from "@/apis/inform";
import {Download} from "@element-plus/icons-vue";

const props = defineProps(["id"])
let loading = ref(true)

const inform = ref({})
const isPdf = ref(false)

const getInform = () => {
    getInformById(props.id).then(
        res => {
            inform.value = res.data
            inform.value.filename = decodeURI(inform.value.resourceId.slice(inform.value.resourceId.lastIndexOf("/") + 1))
            isPdf.value = inform.value.resourceId.includes(".pdf")
        }
    )
}

const errorHandler = () => {
    ElMessage.error("文件加载失败,请稍后再试")
}
const handleRenderedDocx = () => {
    const docxDom = document.querySelectorAll('.vue-office-docx .docx-wrapper .docx')
    docxDom.forEach(value => {
        // value.style.display = "flex"
        // value.style.flexDirection = "row"
        // value.style.justifyContent = "center"
        // value.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)"
    })
    loading.value = false
}
const handleRenderedPdf = () => {
    document.querySelector('.vue-office-pdf').style.overflow = "visible";
    const pdfDom = document.querySelector('.vue-office-pdf-wrapper')
    pdfDom.style.background = "#fff"
    pdfDom.style.padding = "30px 0"
    for(let canvas of pdfDom.children){
        canvas.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)"
    }
    loading.value = false
}
const download = () => {
    let a = document.createElement('a');
    let event = new MouseEvent('click');
    a.download = inform.value.filename
    a.href = inform.value.resourceId
    a.dispatchEvent(event);
}
onMounted(() => getInform())
</script>

<style scoped>
:deep(.vue-office-docx) {
    overflow: visible
}

:deep(.vue-office-docx .docx-wrapper) {
    background-color: #fff;
    padding: 0;
    width: 100%;
}
</style>
